<template>
  <div
    :id="id"
    class="map-container h-full w-full"
    :style="mapContainerStyle"
  ></div>
</template>
<script lang="tsx">
import { createOlMap } from '@boeyo/hooks';
import { useRoute } from 'vue-router';

const { useOl, getMap } = createOlMap();
export { useOl, getMap };
</script>

<script setup lang="tsx">
import { CSSProperties, computed, onMounted, useId } from 'vue';

const route = useRoute();
const mapContainerStyle = computed<CSSProperties>(() => {
  if (route.query.active && route.query.active != '3') {
    return {
      filter: 'blur(5px)',
    };
  }
  return {};
});

const extent: [[number, number], [number, number]] = [
  [50, -5],
  [160, 60], // 右上角经度纬度转投影坐标
];

// 渲染地图
// 地图相关
const id = useId();

const {
  renderTile, // mounted 后调用绘制地图
  renderFeature, // 绘制 feature
  removeFeature, // 删除 feature
  animate, // 平滑移动中心点
} = useOl({
  target: id, // 地图挂载节点
  zoom: 10, // 地图层级
  maxZoom: 12, // 最大层级
  extent,
  tileUrl: VITE_MAP_URL, // 瓦片地址
  onClick({ lonLat }) {
    // 点击事件， 如果点击 feature， 会将 绘制的 feature 中 data 传回来
    // renderMap(lonLat);
  },
});

onMounted(() => {
  // 渲染瓦片
  renderTile();
  // 移动中心点
  //   renderMap(center);
});

const renderMap = (center: Array<number>[]) => {
  // 清除原有坐标点
  removeFeature();
  animate({
    center, //布局问题保证中心点偏移
    duration: 100,
  });
  // 绘制坐标点
  renderFeature({
    lonLat: center,
    style: {
      image: {
        src: '/static/access/mark-params.png',
        scale: 0.8,
      },
    },
  });
};

defineExpose({
  renderMap,
});
</script>

<style lang="scss">
.map-container #by-map-layer {
  filter: brightness(72%) contrast(205%) sepia(244%) saturate(136%) invert(100%);
  outline: 5px solid transparent;
}
</style>
